# Loader 分析与优化

import NextSteps from '@components/NextSteps';
import Step from '@components/Step';

通常来说，优化 Loader 是比较常见的优化 Rspack 或 webpack 编译性能的方式，而大部分情况下，我们除了通过替换**更快的** `loader` 之外，常见的手段就是给 `loader` 设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) 来**减少执行**。

而 **Rsdoctor** 提供了两个核心模块（[Loader Overall](/guide/usage/loaders-timeline) / [Loader Analysis](/guide/usage/loaders-analysis)）来帮助你根据 Loader 的调用信息进行深度优化。

## 如何分析？

不管是哪种手段去优化 Loader，我们都需要拿到关于 Loader 的**数据**信息，比如 **「某个 Loader 编译了哪些文件」**、**「编译某些文件的耗时信息」** 等等，我们才能更精确的进行优化。

### 文件树结构

我们通过 **Rsdoctor** 提供的 Loader Analysis 模块，我们可以看到在整个编译过程中**所有经过 Loader 的文件**组成的树结构，如下图所示：

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

### 分析目录

通过 **点击选中目录** 可以在**文件树**的右侧，看到当前**选中目录下所有 Loader 的耗时统计数据**（[**预估耗时**]()），即 `"Statistics of ***"` 的卡片内容如下图所示：

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-table.png"
  width="300px"
  height="400px"
  style={{ margin: 'auto' }}
/>

我们可以很直观的知道这个文件夹下的耗时数据，比如 某个 Loader 处理的**文件数**以及**预估耗时**，以及所有数据的总和，从而进一步帮助我们去决策如何优化 Loader。

:::tip 优化小技巧
通常来说，在 **`node_modules`** 内的一些三方库目录，我们可以很容易跟据 Loader 的耗时信息，来判断我们是不是有必要要给这个目录设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude)，来减少比如常见的耗时长的 `babel-loader` 的执行。
:::

### 分析文件

通过 **点击文件** 则会弹出一个遮罩层，其中是 当前点击的文件 **所有执行过的 Loader 列表**，通过**点击选中**对应的 Loader 可以看到目标 Loader **调用时**的**输入输出**和**参数数据信息**。

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-code-change.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

- **参数数据信息**：点击「**show more**」或者左上角展开按钮，可查看对应参数信息。

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-options.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

我们可以通过此处单个文件的 Loader 信息来排查问题，以及决策是不是该被添加到 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) 中。

:::tip 优化小技巧
通常来说，在 **项目外（即 cwd 之外，通常为 workspace）** 内的一些内部包，我们可以跟据目录的 Loader 耗时信息 以及 单个文件的**输入输入**信息（因为这些内部包**有可能**已经是兼容性比较好的 ES 语法），来判断我们是不是有必要要给这个目录设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude)。
:::

## 了解更多

你可能想要了解更多关于 Loader 分析模块的使用介绍：

<NextSteps>
  <Step
    href="/guide/usage/loaders-timeline"
    title="Loader Timeline 使用介绍"
    description="了解 Rsdoctor 内 Loader Timeline 中的图表使用说明"
  />
  <Step
    href="/guide/usage/loaders-analysis"
    title="Loader Analysis 使用介绍"
    description="了解 Rsdoctor 内 Loader Analysis 的操作和使用方式"
  />
</NextSteps>
